<template>
  <!--详情页-->
  <Modal class="lz-modal" v-model="detailShow" footer-hide :title="detailTitle">
    <!--    <div class="lz-modal-title">-->
    <!--      <div class="lz-modal-title-content">-->
    <!--        {{detailTitle}}-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="lz-modal-content">
      <Form ref="detailForm" :model="detailData" :rules="formRules" :hide-required-mark="pageOperateType==operate.SHOW">
        <FormItem prop="name" label="姓名">
          <Input type="text" v-model="detailData.name" placeholder="请输入姓名"
                 :readonly="pageOperateType==operate.SHOW">
          </Input>
        </FormItem>
        <FormItem prop="code" label="学号">
          <Input type="text" v-model="detailData.code" placeholder="请输入姓名"
                 :readonly="pageOperateType==operate.SHOW">
          </Input>
        </FormItem>
        <FormItem prop="lesson" label="课程名">
          <Select
              :disabled="pageOperateType==operate.SHOW"
              :key="defaultLesson"
              v-model="detailData.lesson"
              filterable
              :remote-method="getLesson"
              :default-label="defaultLesson">
            <Option v-for="(option, index) in lessonList" :value="option.value" :key="index">{{ option.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="credit" label="学分">
          <Input type="text" v-model="detailData.credit" placeholder="请输入学分"
                 :readonly="pageOperateType==operate.SHOW">
          </Input>
        </FormItem>
        <FormItem prop="gpa" label="绩点">
          <Input type="text" v-model="detailData.gpa" placeholder="请输入绩点"
                 :readonly="pageOperateType==operate.SHOW">
          </Input>
        </FormItem>
      </Form>
    </div>

  </Modal>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import config from '@/config'


const {operate} = config.setting

/**
 * 打开详情弹框*/
// 是否显示详情
const detailShow = ref(false)
// 详情标题
const detailTitle = ref('')
// 详情数据
const detailData = ref({})
// 详情页操作类型——编辑、查看
const pageOperateType = ref(0)
// 默认显示的课程名，根据showModal中的参数operateType判断
const defaultLesson = ref('')

function showModal(row, operateType) {
  detailData.value = row
  pageOperateType.value = operateType
  detailTitle.value = operateType == operate.EDIT ? '编辑' : '查看' + '成绩'
  defaultLesson.value = list.value.filter(item => item.value == row.lesson)[0].label
  detailShow.value = true
}

/**
 * 表单校验规则*/
const formRules = {
  name: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        if (pageOperateType.value == operate.SHOW) {
          callback();
        }

        if (value.trim().length > 5 || value.trim().length < 3) {
          callback(new Error('请输入3到5位的名字'));
        } else {
          callback();
        }

      }, trigger: 'blur'
    }
  ],
  code: [
    {required: true, message: '请输入学号', trigger: 'blur'}
  ]
}

/**
 * 课程选择部分*/
const lessonList = ref([])
const getLessonLoading = ref(false)
const list = ref([
  {
    value: 'beijing',
    label: '北京'
  },
  {
    value: 'math',
    label: '数学'
  },
  {
    value: 'chinese',
    label: '语文'
  },
  {
    value: 'dataStructure',
    label: '数据结构'
  }
])

function getLesson(query) {
  if (query !== '') {
    getLessonLoading.value = true
    setTimeout(() => {
      lessonList.value = list.value.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);

      getLessonLoading.value = false

    }, 1000)
  } else {
    lessonList.value = []
  }
}

onMounted(() => {

})
defineExpose({
  showModal
})
</script>

<style scoped>

</style>